<template>
	<div class="quality">
		<div class="tableBox">
			<el-row :gatter="20">
				<el-col :span="12">
					<el-form ref="form" label-position="left" :model="form" label-width="55%">
						<el-form-item label="不良个装品数(枚)"><div><el-input v-model="form.num1" placeholder="请输入"></el-input></div></el-form-item>
					</el-form>
				</el-col>
				<el-col :span="12">
					<el-form  ref="form" label-position="left" :model="form" label-width="20%">
						<el-form-item label="原因"><div><el-input v-model="form.num2" placeholder="超过100枚请说明原因"></el-input></div></el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12" style="border-right:solid 1px #eee;">
					<el-form ref="form" label-position="left" :model="form" label-width="60%">
						<el-form-item label="个装品数不良率(%)"><div><el-input v-model="form.num3" placeholder="请输入"></el-input></div></el-form-item>
						<el-form-item label="综合嫁动率(%)"><div><el-input v-model="form.num4" placeholder="请输入"></el-input></div></el-form-item>
						<el-form-item label="不良内装薄膜(个)"><div><el-input v-model="form.num5" placeholder="请输入"></el-input></div></el-form-item>
						<el-form-item label="机器显示速度"><div><el-input v-model="form.num6" placeholder="请输入"></el-input></div></el-form-item>
						<el-form-item label="时间生产性"><div><el-input v-model="form.num7" placeholder="请输入"></el-input></div></el-form-item>
						<el-form-item label="画面薄膜计数"><div><el-input v-model="form.num8" placeholder="请输入"></el-input></div></el-form-item>
						<el-form-item label="计数生产数(箱)"><div><el-input v-model="form.num9" placeholder="请输入"></el-input></div></el-form-item>
					</el-form>
				</el-col>
				<el-col :span="12" style="padding-left:20px;">
					<el-form ref="form" label-position="left" :model="form" label-width="64%">
						<el-form-item label="画面生产数(包)A"><div><el-input v-model="form.num10" placeholder="请输入"></el-input></div></el-form-item>
						<el-form-item label="调整损耗薄膜数(个)B"><div><el-input v-model="form.num11" placeholder="请输入"></el-input></div></el-form-item>
						<el-form-item label="理论生产数(包)"><div><el-input v-model="form.num12" placeholder="请输入"></el-input></div></el-form-item>
						<el-form-item label="理论生产数(箱)D"><div><el-input v-model="form.num13" placeholder="请输入"></el-input></div></el-form-item>
						<el-form-item label="实际良品数(箱)E"><div><el-input v-model="form.num14" placeholder="请输入"></el-input></div></el-form-item>
						<el-form-item label="实际良品数(枚)"><div><el-input v-model="form.num15" placeholder="请输入"></el-input></div></el-form-item>
						<el-form-item label="内装薄膜不良率(%)"><div><el-input v-model="form.num16" placeholder="请输入"></el-input></div></el-form-item>
					</el-form>
				</el-col>
			</el-row>
		</div>
		<div class="tableBox" style="margin-top:30px;">
			<el-form ref="form" label-position="left" :model="form" label-width="42%">
				<el-form-item label="个装品数损耗高原因"><div><el-input v-model="form.text1" placeholder="请输入原因"></el-input></div></el-form-item>
				<el-form-item label="薄膜损耗量大原因"><div><el-input v-model="form.text2" placeholder="请输入原因"></el-input></div></el-form-item>
			</el-form>
		</div>
		<div class="tableBox" style="margin-top:30px;">
			<el-table :data="tableData" max-height="660px">
				<el-table-column type="index" width="80">
					<template slot-scope="scope">
						<div @click="createRow" v-if="scope.$index == tableData.length -1"><img src="@/assets/img/add.png"></div>
						<div @click="delRow(scope.$index, scope.row)" v-else><img src="@/assets/img/plus.png"></div>
					</template>
				</el-table-column>
				<el-table-column prop="time" label="检查项目" align="center" width="200" show-overflow-tooltip>
					<template slot-scope="scope">
						<div class="rework"><el-input v-model="scope.row.time" placeholder="请输入故障"></el-input></div>
					</template>
				</el-table-column>
				<el-table-column prop="errorName" label="时间" align="center" min-width="200">
					<template slot-scope="scope">
						<div class="rework"><el-input v-model="scope.row.errorName" placeholder="请选择时间"></el-input></div>
					</template>
				</el-table-column>
				<el-table-column prop="logName" label="检查结果" align="center" min-width="200">
					<template slot-scope="scope">
						<div class="rework">
							<el-select v-model="scope.row.logName" placeholder="请选择类型">
								<el-option
									v-for="item in options"
									:key="item.value"
									:label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
					  </div>
					</template>
				</el-table-column>
				<el-table-column prop="remarks" label="确认人" align="center" min-width="200">
					<template slot-scope="scope">
						<div class="rework"><el-input v-model="scope.row.remarks" placeholder="请输入备注"></el-input></div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div style="float:right;margin-top:50px;"><el-button type="primary">确认</el-button></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					num1: '',
					num2: '',
					num3:'',
					num4:'',
					num5:'',
					num6:'',
					num7:'',
					num8:'',
					num9:'',
					num10:'',
					num11:'',
					num12:'',
					num13:'',
					num14:'',
					num15:'',
					num16:'',
					text1:'',
					text2:''
				},
				options: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				tableData: [
					{
						id: '1',
						time: '',
						timelength: '',
						errorName: '',
						logName: '',
						remarks: ''
					},
					{
						id: '1',
						time: '',
						timelength: '',
						errorName: '',
						logName: '',
						remarks: ''
					},
					{
						id: '1',
						time: '',
						timelength: '',
						errorName: '',
						logName: '',
						remarks: ''
					},
					{
						id: '1',
						time: '',
						timelength: '',
						errorName: '',
						logName: '',
						remarks: ''
					},
					{
						id: '1',
						time: '',
						timelength: '',
						errorName: '',
						logName: '',
						remarks: ''
					}
				],
				value:'',
				value1:'',
			};
		},
		methods: {
			onSubmit() {
				console.log('submit!');
			},
			createRow(){
				var list = {
						id: '1',
						time: '',
						timelength: '',
						errorName: '',
						logName: '',
						remarks: ''
					};
					this.tableData.push(list); 
			},
			delRow(val, row){
				this.tableData.splice(val, 1);
			},
			tableRowClassName({ row, rowIndex }) {
				if (rowIndex % 2 == 1) {
					return 'gray-row';
				}
				return '';
			}
		}
	}
</script>

<style scoped>
.quality{
	height: calc(100vh - 150px);
	overflow-y: auto;
}
.tableBox {
	border-radius: 10px;
	background:#fff;
	padding: 30px 30px;
	height:auto;
}
.quality >>> .el-form-item{
	border-bottom:solid 1px #eeeeee;
	padding-bottom:5px;
}
.quality >>> .el-form-item__label{
	font-size:24px;
	color:#000;
	line-height: 60px;
}
.quality >>> .el-form-item__content{
	font-size:24px;
	color:#666666;
}
.quality >>> .el-input > input{
	background:#fff;
	font-size:24px;
}
.quality >>> .el-input--large .el-input__inner {
	padding-left: 30px !important;
}
::v-deep .el-input__icon {
	display: none;
}
</style>
